<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=request.getContextPath() %>\">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>我的订单</title>
<script type="text/javascript" src="js/jquery-2.2.3.min.js"></script>
<script type="text/javascript">
	$(function(){
		quxiaoys();
		$(".quxiao").click(function(){
			if($(this).parents(".mo-list-items").find(".orstatus").text()=="待支付"){
				$(this).parents(".mo-list-items").find(".orstatus").text("已取消")
				quxiaoys();
				var $orid=$(this).parents(".mo-list-items").find(".orid").text();
				
				$.ajax({
					type:"post",
					url:"dingdan?v=updateortatus",
					data:"orstatus=已取消&orid="+$orid,
					success:function(msg){
						
					}
				})
				
			}else{
				$(".chongfuselect").fadeIn(700);
				$(".chongfuselect").fadeOut(700);
			}
		})
		//给订单按钮赋值
		$(".ddcz").each(function(i,v){
			if($(v).attr("status")=="未支付"){
				$(v).val("订单付款");
			}
			if($(v).attr("status")=="已支付"){
				$(v).val("订单付款");
			}
			if($(v).attr("status")=="已发货"){
				$(v).val("订单收货");
			}
			if($(v).attr("status")=="已完成"){
				$(v).val("已完成");
			}
		})
		//订单按钮点击事件
		$(".ddcz").click(function(){
			console.log($(this).parents(".mo-list-items").find(".dcount"))
			if($(this).val()=="订单付款"){
				if($(this).attr("status")=="待支付"){
					$(".queright").attr("orid",$(this).parents(".mo-list-items").find(".orid").text());
					
					$(".adddzpager").show();
				}else{
					$(".chongfuselect").text("该订单已支付");
					$(".chongfuselect").fadeIn(700);
					$(".chongfuselect").fadeOut(700);
				}
			}
			if($(this).val()=="订单收货"){
				if($(this).attr("status")=="已发货"){
					$(this).parents(".mo-list-items").find(".orstatus").text("已完成")
					var $orid=$(this).parents(".mo-list-items").find(".orid").text();
				
					$.ajax({
						type:"post",
						url:"dingdan?v=updateortatus",
						data:"orstatus=已完成&orid="+$orid,
						success:function(msg){
							$(".chongfuselect").text("收货成功");
							$(".chongfuselect").fadeIn(700);
							$(".chongfuselect").fadeOut(700);
						}
					})
					$(this).parents(".mo-list-items").remove();
				}else{
					$(".chongfuselect").text("该订单状态无法收货");
					$(".chongfuselect").fadeIn(700);
					$(".chongfuselect").fadeOut(700);
				}
			}
			if($(this).val()=="已完成"){
				
			}
		})
		$(".quleft").click(function(){
			$(".adddzpager").hide();
		})
		//订单付款
		$(".queright").click(function(){
			var $orid=$(this).attr("orid")
			$.ajax({
				type:"post",
				url:"dingdan?v=updateortatus",
				data:"orstatus=已支付&orid="+$orid,
				success:function(msg){
					$(".chongfuselect").text("付款成功");
					$(".chongfuselect").fadeIn(700);
					$(".chongfuselect").fadeOut(700);
				}
				
			})
			$(".adddzpager").hide();
			$(".mo-list-items").each(function(i,v){
				console.log($(v).find(".orid").text())
				if($(v).find(".orid").text()==$orid){
					$(v).remove();
				}
			})
		})
	})
	function quxiaoys(){
		$(".mo-list-items").find(".orstatus").each(function(i,v){
			if($(v).text()=='已取消'){
				$(v).parents(".mo-list-items").addClass("quxiaobg");
			}
		})
	}
</script>
	<style>
	*{
		margin: 0;
		padding: 0;
	}
	
	body{
		font-family: "microsoft yahei";
		font-size: 14px;
		color: #333;
		background: #f7f7f7;
	}
	a{
		color: #767676;
		text-decoration: none;
	}
	ul{
		list-style: none;
	}
	.text-center{
		text-align: center;
	}
	.text-left{
		text-align: left;
	}
	
	.my-main{
		width: 1140px;
		margin: 20px auto;
		border: 0px solid red;
	}
	/*左边导航栏*/
	.leftNav{
		width: 160px;
		height: 500px;
		float: left;
		background: #fff;
		padding-right: 15px;
		padding-left: 15px;
	}
	.my-menu dt{
		padding: 10px 15px;
		font-weight: 700;
	}
	.my-menu dd{
		border-bottom: 1px solid #d5d5d5;
	}
	.my-menu dd .nav{
		list-style: none;
	}
	.my-menu dd .nav li a{
		border-radius: 2px;
		display: block;
		padding: 10px 15px;
	}
	.my-menu .mm-root a{
		color: #da2a2a;
		font-size: 16px;
		font-weight: 500;
	}
	/*右边内容*/
	.my-page{
		margin-left: 20px;
		padding: 20px;
		width: 890px;
		float: left;
		background: #fff;
	}
	.my-page .page-header{
		margin: 0 0 20px;
		padding-bottom: 9px;
		border-bottom: 1px solid #eee;
	}
	.my-page .page-header h1{
		font-size: 21px;
		font-weight: 500;
	}
	.my-page .page-header h1 small{
		color: #777;
		font-size: 40%;
		font-weight: 400;
	}
	.my-page .m-os-count{
		margin-bottom: 20px;
		margin-top: 10px;
	}
	.my-page .m-os-count:after{
		content:'.';
		display:block;
		visibility: hidden;
		height:0px;
		clear: both;
	}
	.my-page .m-os-count .col-xs-3{
		width: 20%;
		float: left;
		text-align: center;
		line-height: 50px;
	}
	.my-page .m-os-count .col-xs-3 a{
		display: block;
		border-top:1px solid #ccc;
		border-bottom:1px solid #ccc;
		border-left: 1px solid #ccc;
		width: 100%;
	}
	.btnleft{
		border-radius: 4px 0 0 4px;
	}
	.btnright{
		border-right: 1px solid #ccc;
		border-radius: 0px 4px 4px 0px;
	}
	.my-page .m-os-count .col-xs-3 a img{
		position: relative;
		top: 8px;
	}
	.my-page .m-os-count .col-xs-3 a .payment-number{
		width: 20px;
		height: 20px;
		border-radius: 100%;
		background: #dd2727;
		line-height: 20px;
		text-align: center;
		color: #fff;
		display: inline-block;
	}
	.my-page .my-orders-list{
		margin-top: 20px;
	}
	.my-page .my-orders-list .mo-list-head{
		width: 100%;
		margin:0 0 5px;
		border: 1px solid #ddd;
		background: #ddd;
		padding-top: 9px;
	}
	.row:after{
		content: ".";
		display: block;
		visibility: hidden;
		height: 0px;
		clear: both;
	}
	.col-xs-2{
		float: left;
		width: 16.66666667%;
		  padding-bottom: 8px;
	}
	.col-xs-4{
		float: left;
		width: 33.33333333%;
	}
	.my-page .my-orders-list .mo-list-head th{
		text-align: center;
		float: left;
	}
	.my-page .my-orders-list .mo-list-items{
		width: 100%;
		text-align: left;
		margin-top: 20px;
		border-spacing: 0;
		border: 1px solid #ddd;
		border-collapse: collapse;
	}
	.my-page .my-orders-list .mo-list-items .list-inline{
		margin:0px;
		padding:0px;
	}
	
	.my-page .my-orders-list .mo-list-items th{
		padding: 8px;
		background: #f3f3f3;
		border: none;
	}
	.my-page .my-orders-list .mo-list-items td{
		padding: 8px;
		vertical-align: top;
		border: 1px solid #ddd;
	}
	.my-page .my-orders-list .mo-list-items .list-inline li{
		display: inline-block;
		padding-right: 5px;
		padding-left: 5px;
	}
	.my-page .my-orders-list .mo-list-items .mo-item{
		padding: 5px 0;
		border-bottom: 1px #efefef solid;
	}
	.my-page .my-orders-list .mo-list-items .mo-item:after{
		content: ".";
		display: block;
		visibility: hidden;
		height: 0px;
		clear: both;
	}
	.img-thumbnail{
		display: inline-block;
		padding: 4px;
		width: 61px;
		height: 61px;
	}
	.btn{
		margin-top: 5px;
	}
	.btn-xs{
		display: block;
		width: 90%;
		padding: 1px 5px;
		font-size: 12px;
		border-radius: 1px;
		text-align: center;
		font-weight: 400;
		border: 1px solid;
	}
	.btn-danger{
		background: #ed1c24;
		border-color: #ed1c24;
		color: white;
	}
	.btn-default{
		color: #333;
		background-color: #fff;
		border-color: #ccc;
	}
	.my-header{
		margin-bottom: 75px
	}
	.my-header:after{
				content: ".";
				display: block;
				visibility: hidden;
				height:0px;
				clear: both;
		}
			
	.my-footer:after{
				content: ".";
				display: block;
				visibility: hidden;
				height:0px;
				clear: both;
		}
		.chongfuselect{
			position: fixed;
			top: 206px;
			left: 632px;
			background-color: rgba(0,0,0,0.5);
			color: #fff;
			width: 160px;
			height: 60px;
			line-height: 60px;
			text-align: center;
			border-radius: 5px;
			font-size: 14px;
			z-index: 9999;
			display: none;
		}
		.quxiaobg{
			background-color: #efefef;
		}
		.adddzpager{
				display: none;
				width: 100%;
				height: 104%;
				position: fixed;
				top: -20px;
				z-index: 99999;
				background-color: rgba(0,0,0,0.3);
		}
		.adddz{
			width: 37%;
			height: 200px;
			margin:200px 34%;
			background-color: #fff;
			border-radius: 4px;
		}
		.paytip{
			font-size: 15px;
			color:#666;
			text-align: center;
			padding: 5px;
		}
		.btnbox:after{
			content:".";
			visibility: hidden;
			height: 0px;
			display: none;
			clear: both;
		}
		.quleft{
			width:50%;
			float: left;
			padding:21px 0px;
			text-align:center;
			position:relative;
			top:47px;
			font-size:16px;
		}
		.queright{
			width:50%;
			float: right;
			padding:21px 0px;
			position:relative;
			top:47px;
			text-align:center;
			font-size:16px;
			color:#FFDE45;
		}
</style>
<script charset="utf-8">
		/*购物数量 事件拦截开始*/
		
		/*购物数量 事件拦截结束*/
</script>
<script type="text/javascript">
    $('.MyOrders .col-xs-3').find('a').on('click',function(){
        $(this).addClass('myback')
    });
    $('.brief').map(function(){
        var _this=$(this)
        var repertory_id=$(this).attr('data-brief');
        var url='https://www.konka.com/index.php/openapi/goods/products/goods_id/'+repertory_id;
        $.post(url,{},function(res){
            _this.html(res.data.brief)
        })
    })
   
</script> 
</head>
<body>
		<div class="adddzpager" >
			<div class="adddz">
				<div style="padding:15px 15px;text-align: center;font-size: 20px">提示</div>
				<div class="paytip">该订单未付款，请点击一键付款</div>
				<div class="btnbox">
					<div class="quleft">取消</div>
					<div class="queright">一键付款</div>
				</div>
			</div>
		</div>
		<div class="chongfuselect">
			<p>该订单状态无法取消</p>
		</div>
		<div class="my-header">
			<jsp:include page="include/header.jsp"></jsp:include>
		</div>
		<div class="my-main">
			<div class="row">
				<div class="leftNav">
					<dl class="my-menu">
						<dt class="mm-root">
							<a>会员中心</a>
						</dt>
						<dd></dd>
						<dt>交易</dt>
						<dd>
							<ul class="nav">
								<li>
									<a href="dingdan">我的订单</a>
								</li>
								
								<li>
									<a href="gwc">我的购物车</a>
								</li>
							</ul>
						</dd>
						<dt>购物</dt>
						<dd>
							<ul class="nav">
								<li>
									<a href="address">我的收货地址</a>
								</li>
							</ul>
						</dd>
						<dt>账户</dt>
						<dd>
							<ul class="nav">
								<li>
									<a>个人信息</a>
								</li>
							</ul>
						</dd>
					</dl>
				</div>
				<div class="my-page">
					<div class="page-header">
						<h1>我的订单
						<small>My Orders</small>
						</h1>
					</div>
					<div class="m-os-count">
						<div class="col-xs-3">
							<a class="btnleft" href="dingdan">
								<img width="25" src="imgs/liuimgs/all.png">
								全部订单&nbsp;
								<span class="payment-number">${allorders}</span>
							</a>
						</div>
						<div class="col-xs-3">
							<a href="dingdan?v=dingdanstatus&orstatus=待支付">
								<img width="25" src="imgs/liuimgs/mem-payment.png">
								待支付&nbsp;
								<span class="payment-number">${dzfcount}</span>
							</a>
						</div>
						<div class="col-xs-3">
							<a href="dingdan?v=dingdanstatus&orstatus=已支付">
								<img width="25" src="imgs/liuimgs/mem-delivery.png">
								待发货&nbsp;
								<span class="payment-number">${dfhcount}</span>
							</a>
						</div>
						<div class="col-xs-3">
							<a href="dingdan?v=dingdanstatus&orstatus=已发货">
								<img width="25" src="imgs/liuimgs/mem-goods.png">
								待收货&nbsp;
								<span class="payment-number">${dshcount}</span>
							</a>
						</div>
						<div class="col-xs-3">
							<a class="btnright" href="dingdan?v=dingdanstatus&orstatus=已完成">
								<img width="25" src="imgs/liuimgs/mem-payment.png">
									已完成&nbsp;
									<span class="payment-number">${dpjcount}</span>	
							</a>
						</div>
					</div>
					<div class="my-orders-list">
						<table class="mo-list-head">
							<thead>
								<tr class="text-nowrap">
									<th width="70%">
										<div class="row">
											<div class="col-xs-2">
												商品图片
											</div>
											<div class="col-xs-4 text-left">
												商品名称
											</div>
											<div class="col-xs-2">
												数量
											</div>
											<div class="col-xs-2">
												商品价格
											</div>
										</div>
									</th>
									<th width="15%" >
										订单金额
									</th>
									<th width="15%">
										订单操作
									</th>
								</tr>
							</thead>
					
						</table>
					<c:forEach var="o" items="${alllist}">
						<table class="mo-list-items">
							<thead>
								<tr>
									<th width="70%">
										<ul class="list-inline">
											<li>${o.ortime} </li>
											<li class="orid">${o.orid}</li>
											<li class="orstatus">${o.orstatus}</li>
										</ul>
									</th>
									<th width="15%"></th>
									<th width="15%"></th>
								</tr>
							</thead>
						<tbody>
							<tr>
								<td>
								<c:forEach var="d" items="${o.list}">
									<div class="mo-item">
										<div class="col-xs-2">
											<a>
												<img class="img-thumbnail" src="${d.pho_img}">
											</a>
										</div>
										<div class="col-xs-4">
											<a><span>${d.cname}</span></a>
										</div>
										<div class="col-xs-2 text-center dcount" sid="${d.sid}"><span>${d.dedcount}</span></div>
										<div class="col-xs-2 text-center">￥<span>${d.deprice}</span></div>
										<div class="col-xs-2 text-center"></div>
									</div>
								</c:forEach>
								</td>
								<td class="text-center">
									<small>￥${o.orprice}</small>
									<span></span> 
								</td>
								
								<td>
									<input type="button" status="${o.orstatus}" value="订单付款" class="btn-xs btn-danger ddcz"/>
									<input type="button" value="取消订单" class="btn btn-xs btn-default quxiao">
								</td>
							</tr>
						</tbody>
					</table>
				</c:forEach>
			</div>
		</div>
	</div>
</div>
		<div class="my-footer">
			<jsp:include page="include/footer.jsp"></jsp:include>
		</div>	
</body>
</html>